<template>
  <div class="dashboard-editor-container">
    <!--    <msg-corner class="msg-corner" />-->

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 10px">
      <line-chart
        :chart-data="lineChartData"
        :amountPayableData="amountPayableData"
        :orderDate="orderDate"
        :key="times"
      />
    </el-row>
       <el-row style="padding: 16px 0; margin-bottom: 10px">
         <div style="width:100%;display:flex;justify-content: space-between;margin-right：20px">
        <div style="background: #fff;padding:20px;width: 48%; ">
      <div >
        <span class="rate-text">昨日取消率</span>
        <span class="rate-text" style="font-weight: bold; margin-right: 48px"
          >{{saleData.cancel_rate}}%
        </span>
      </div>
      <span class="rate-text" style="color: #666666; margin-top: 30px;display:block;margin-bottom:10px" >取消率过高，可能引起店铺评分扣罚</span>
    </div>
    <div style="background: #fff;padding:20px; cursor:pointer;width: 48% " @click="menberloss">
      <!-- <div>预计将会有个<span style="color:red;margin-left:10px;margin-right:10px">{{daysBumner}}</span>客户流失<span style="font-size:12px">(30天未下单)</span></div> -->
        <div >
        <span class="rate-text">预计流失{{daysBumner}}个客户</span>
           </div>
        <span class="rate-text"  style="color: #666666; margin-top: 30px;display:block;margin-bottom:10px"
          >超过30天未下单的客户为预计流失客户
        </span>

    </div>
       </div>
    </el-row>

    <!--    <el-row :gutter="32">-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <raddar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <pie-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <bar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <!--    <el-row :gutter="8">-->
    <!--      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">-->
    <!--        <transaction-table />-->
    <!--      </el-col>-->
    <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
    <!--        <todo-list />-->
    <!--      </el-col>-->
    <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
    <!--        <box-card />-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import MsgCorner from "@/components/MsgCorner";
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import TransactionTable from "./components/TransactionTable";
import TodoList from "./components/TodoList";
import BoxCard from "./components/BoxCard";
import { summary as sysPvuvList } from "@/api/sysPvuv";
import { summary as memberList } from "@/api/member";
import { summary as paymentList } from "@/api/payment";
import utils from "../../../utils/utils.js";
import { showSaleHead, showChartData,lossNum} from "@/api/bussinessData";

export default {
  name: "DashboardAdmin",
  components: {
    MsgCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard,
  },
  data() {
    return {
      lineChartData: {
        expectedData: [0],
        actualData: [0],
      },
      eachindex: [],
      amountPayableData: [],
      orderDate: [],
      times:null,
       saleData: {},
       daysBumner:"",
       days:30
    };
  },
  created() {
    this.getSaleHead();
    this.sysPvuvClick();
    this.getload()
    this.lossNumlist()
  },
  methods: {
    menberloss(){
      this.$router.push({
        path:'member/loss',query: { days:this.days}
      })
    },
    lossNumlist(){
      let params = new URLSearchParams();
      params.append("days",this.days);
      lossNum(params).then(res=>{
        this.daysBumner=res.data

      })
    },
        getload() {
      showSaleHead().then((res) => {
        console.log(res);
        this.saleData = res.data;
      });
    },
    getSaleHead() {
      showChartData().then((res) => {
        console.log(res);
        this.eachindex = res.data;
        this.amountPayableData = [];
        this.orderDate = [];
        this.eachindex.forEach((item) => {
          this.amountPayableData.push(item.amount_payable);
          this.orderDate.push(item.order_date);
        });
        this.times=new Date().getTime()
      });
    },

    handleSetLineChartData(type) {
      console.log(type);
      if (type == "newVisitis") {
        this.sysPvuvClick();
      } else if (type == "purchases") {
        this.memberClick();
      } else {
        this.paymentClick();
      }
    },
    sysPvuvClick() {
      var _this = this;
      var sysOvuvuv = [];
      var sysOvuvpv = [];
      let params = new URLSearchParams();
      params.append("days", 6);
      sysPvuvList(params)
        .then((response) => {
          console.log(response);
          if (!utils.isNull(response.data)) {
            response.data.forEach(function (item) {
              sysOvuvuv.push(item.uv);
              sysOvuvpv.push(item.pv);
            });
            _this.lineChartData.expectedData = sysOvuvuv;
            _this.lineChartData.actualData = sysOvuvpv;
          } else {
            _this.lineChartData = {
              expectedData: [0],
              actualData: [0],
            };
          }
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    memberClick() {
      var _this = this;
      var memberue = [];
      var memberuv = [];
      let params = new URLSearchParams();
      params.append("days", 6);
      memberList(params)
        .then((response) => {
          console.log(response);
          if (!utils.isNull(response.data)) {
            response.data.forEach(function (item) {
              memberue.push(item.ue);
              memberuv.push(item.uv);
            });
            _this.lineChartData.expectedData = memberue;
            _this.lineChartData.actualData = memberuv;
          } else {
            _this.lineChartData = {
              expectedData: [0],
              actualData: [0],
            };
          }
        })
        .catch((error) => {});
    },
    paymentClick() {
      var _this = this;
      var paymentuv = [];
      var paymentamount = [];
      let params = new URLSearchParams();
      params.append("days", 6);
      paymentList(params)
        .then((response) => {
          console.log(response.data);
          if (!utils.isNull(response.data)) {
            response.data.forEach(function (item) {
              paymentuv.push(item.uv);
              paymentamount.push(item.amount);
            });
            _this.lineChartData.expectedData = paymentuv;
            _this.lineChartData.actualData = paymentamount;
          } else {
            _this.lineChartData = {
              expectedData: [0],
              actualData: [0],
            };
          }
        })
        .catch((error) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
 .details_Title {
    font-size: 18px;
    color: #409EFF;
  }
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .msg-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
